<template>
	<view class="uni_box home">
		<navbar title='我的报名'>
			<view class="hright" slot="right" @click="getshua">
				<text>刷新</text>
			</view>
		</navbar>
		<view class="content">
			<view class="blist">
				<view class="bitem" v-for="(item,index) in list" :key="index">
					<view class="bone">
						<text class="bname">{{ item.title }}</text>
						<text class="ztai">{{item.status_text}}</text>
					</view>
					<view class="bnav">
						<view class="nlist">
							<text class="baoname">报名时间：</text>
							<text class="baotime">{{item.createtime}}</text>
						</view>
						<view class="newlist" v-if="i.name&&i.data" v-for="(i,ind) in item.data">
							<view class="nlist" v-if="i.type!=2">
								<text class="baoname">{{i.name}}：</text>
								<text class="baotime">{{i.data}}</text>
							</view>
							<view class="nlist" v-if="i.type==2">
								<text class="baoname">{{i.name}}：</text>
								<view class="tulist">
									<image class="tuimg" v-for="(n,nid) in i.newdata" :src="n" @click.stop="getyulan(n,i.newdata)"></image>
								</view>
							</view>
						</view>
						
					</view>
					<view class="bbot">
						<view class="" v-for="(ibtn,indbtn) in item.buts" :key="indbtn">
							<view class="botitem fz" v-if="ibtn=='qrCode'" @click="getbtnClick(ibtn,item)">复制任务码</view>
							<view class="botitem tijiao" v-if="ibtn=='addOrder'"  @click="getbtnClick(ibtn,item)">提交</view>
							<view class="botitem zd" v-if="ibtn=='getOrder'"  @click="getbtnClick(ibtn,item)">做单明细</view>
							<!-- <view class="botitem fz" v-if="ibtn=='qrCode'">复制任务码</view> -->
						</view>
						
						<!-- <view class="botitem ck">查看二维码</view>
						<view class="botitem tijiao">提交</view>
						<view class="botitem zd">做单明细</view> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 弹窗二维码 -->
		<view class="st">
			<u-popup v-model="yueshow" mode="center" @close="yueshow=false" width="80%" :closeable="true">
				<view class="stpop">
					<!-- <view class="chaview">
						<image class="macha" src="/pages_subject/static/img/macha.png" mode="" />
					</view> -->
					<image class="mapop" mode="widthFix" :src="tanimg" @click="getyulantwo(tanimg)" />
					<!-- <text class="matit">注：{{taninfo.title}}</text> -->
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				id:'',
				leitype:'',
				yueshow:false,
				tanimg:''
			}
		},
		onLoad(option) {
			this.id = option.id
			if(option.leitype){
				this.leitype = option.leitype // 1首页
			}
			this.getList()
		},
		onShow() {
		},
		methods: {
			async getList(){//列表数据
				let res =''
				if(this.leitype == 1){
					//首页
					res = await this.$u.api.sgetBaoMing({
						limit:this.limit,
						page:this.page,

					});
				}else if(this.leitype == 3){
					//名片
					res = await this.$u.api.getBaoMing({
						limit:this.limit,
						page:this.page,

					});
				}
				   
			this.last_page = res.lastpage;
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];	
			let newlist = this.list
			for(let i in newlist){
				for(let j in newlist[i].data){
					if(newlist[i].data[j].type == 2){
						newlist[i].data[j].newdata = newlist[i].data[j].data.split(',')
					}
				}
			}
			this.list = newlist
			console.log(this.list)
			if(this.page >= this.last_page){
				this.status = 'nomore';
			}
				
			},
			loadmore() {
				let page = this.page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getbtnClick(ibtn,item){
				console.log(ibtn)
				if(ibtn == 'qrCode'){
					//复制任务码
					// this.tanimg = item.qrcode
					// this.yueshow = true
					if(item.qrcode){
						// let list = []
						// list.push(item.qrcode)
						// uni.previewImage({
						// 	current: item.qrcode, //预览图片的下标
						// 	urls: list//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						// })
						this.getfgetQrcode(item.id)
					}
					
				}else if(ibtn == 'addOrder'){
					//提交
					this.navrouter("/pages_subject/twoPage/ShenqingBm?bao_id="+item.id+'&leitype='+this.leitype);
				}else if(ibtn == 'getOrder'){
					//做单明细
					this.navrouter("/pages/TPage/MyOrder?bao_id="+item.id+'&leitype='+this.leitype);
				}
			},
			async getfgetQrcode(id){
				let res = await this.$u.api.getQrcode({
					id:id

				});
				console.log(res)
				if(res.qrcode&&res.qrcode!=''){
						let list = []
						list.push(res.qrcode)
						uni.previewImage({
							current: res.qrcode, //预览图片的下标
							urls: list//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
				}
			},
			getshua(){
				this.$u.toast("刷新成功");
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			getyulan(item,list){
				uni.previewImage({
					current: item, //预览图片的下标
					urls: list//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getyulantwo(item){
				let list = []
				list.push(item)
				uni.previewImage({
					current: item, //预览图片的下标
					urls: list//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx 30rpx;
		.blist{
			.bitem{
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				.bone{
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #EEEEEE;
					.bname{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #51565D;
					}
					.ztai{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						margin-left: auto;
					}
				}
				.bnav{
					
					display: flex;
					flex-direction: column;
					padding-bottom: 20rpx;
					.nlist{
						padding: 15rpx 0;
						display: flex;
						flex-direction: row;
						align-items: center;
						.baoname{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #999999;
						}
						.baotime{
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							display: inline-block;
							margin-left: 10rpx;
						}
					}
				}
				.tulist{
					display: flex;
					flex-direction: row;
					.tuimg{
						width: 88rpx;
						height: 88rpx;
						border-radius: 10rpx;
						margin: 0 10rpx 10rpx 0;

					}
				}
				.bbot{
					padding: 20rpx 0;
					border-top: 1rpx solid #eee;
					display: flex;
					flex-direction: row;
					align-items: center;

					.botitem{
						padding: 15rpx 20rpx;
						border-radius: 29rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						margin: 0 14rpx;
						min-width: 120rpx;
						// flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.fz{
						background: #111111;
					}
					.ck{
						background: #19BE6B;
					}
					.tijiao{
						border: 1px solid #999999;
						color: #333;
					}
					.zd{
						background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
					}
				}
			}
		}
	}
	.st {
		/deep/.u-mode-center-box {
			background-color: transparent;
		}

		.stpop {
			background-color: #fff;
			height: 550rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.mapop {
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 50rpx;
			}

			.matit {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FA7938;
			}

			.chaview {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				width: 40rpx;
				height: 40rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(202, 205, 217, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				// position: relative;
				.macha {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
	
</style>
